import '../assets/style/common.less'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import img from '../assets/texture/wavemap.png'
import img1 from '../assets/texture/wave.png'


const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.PlaneGeometry(10, 10, 128, 128);

const light = new THREE.PointLight(
  new THREE.Color('#f4d9af'), 10.0, 0, 0.3
)
const lightHelper = new THREE.PointLightHelper(light)
scene.add(lightHelper)
let sunPOsition = [0,0,0]
light.position.set(...sunPOsition)
scene.add(light)
const ambientLight = new THREE.AmbientLight(0x404040); // 柔和的白光
scene.add(ambientLight);
const controls = new OrbitControls( camera, renderer.domElement );

const textload = new THREE.TextureLoader()

const text = textload.load(img1)
const text1 = textload.load(img)

const material = new THREE.MeshStandardMaterial({
  // color: 0x66ccff,
  map: text1,
  bumpMap: text
})

const water = new THREE.Mesh(geometry, material);
water.rotation.x = -Math.PI / 2;
scene.add(water);

camera.position.set(0, 5, 10);
camera.lookAt(0, 0, 0);

const clock = new THREE.Clock();

let time = 0
const getSunPosition = () => {
  const r = 5
  const yz = 2 * Math.PI
  const ds = time / 2400
  const deg = yz * ds
  const x = r * Math.sin(deg)
  const y = r * Math.cos(deg)
  time++
  return [x, y, 0]
}
function animate() {
    requestAnimationFrame(animate);
    light.position.set(...getSunPosition())
    controls.update()
    lightHelper.update()
    renderer.render(scene, camera);
}

animate();

window.addEventListener('resize', () => {
    const width = window.innerWidth;
    const height = window.innerHeight;
    renderer.setSize(width, height);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
});